<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="status_bar"></view>
		<myTopBar title="监管考评" url='../../static/index/button_an.png'></myTopBar>

		<view class="content">
			<view class="content1">
				<!-- 日期选择 -->
				<view class="content1-date">
					<view class="center-right-">
						<view class="center-right">
							<view class="center-right-inputSelect">
								<text>日期：</text>
								<input @click="visible=true,clickFlag=true" disabled type="text" v-model="data" />
								<view class="center-right-inputSelect-icon" @click="visible=false">
									<u-icon color='#58B6E5' :name='visible?"arrow-up-fill":"arrow-down-fill"'></u-icon>
								</view>
							</view>
						</view>
						<picker-view @click="visible=false" v-if="visible" :value="value" @change="bindChange"
							class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>


				<view class="center-right-btn" @click="toSearch">查询</view>
			</view>
			<!-- 内容 -->
			<view class="content2">
				<view v-for="(item,index) in tableData" class="content-item">
					<view class="">考评日期：<text class="content-text">{{item.appraisalDate}}</text></view>
					<view class="">得分：<text class="content-text">{{item.score}}</text></view>
					<view class="">主要扣分原因：</view>
					<view class="content-text content-text-resonse">{{item.pointsReason}}</view>
					<view @click="toLink(baseUrl+item.fileLink)" class="reportLink">考评文件链接</view>
				</view>
				<u-empty icon-size='50' img-width='150' font-size="15" v-if="tableData.length===0" text="数据为空" ></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import myTopBar from '../topNavigationBar/topNavigationBar'
	export default {
		components: {
			myTopBar
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			for (let i = 2000; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}

			return {
				background: {
					backgroundColor: '#2169D3'
				},
				years,
				year,
				months,
				month,
				value: [9999, month - 1, day - 1],
				visible: false,
				clickFlag: false,
				days,
				day,
				dateFlage: false,
				tableData: [],
				baseUrl: this.$u.baseUrl
			}
		},
		computed: {
			data() {
				if (this.clickFlag) {
					return this.year + '年' + this.month + '月' + this.day + '日'
				} else {
					return ''
				}
			},
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindChange: function(e) {
				console.log(e.detail.value);
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			async toSearch() {
				if (!this.toSearch) {
					this.$u.toast("请先选择日期！")
					return;
				}
				let day;
				if (this.month < 10) {
					if (this.day < 10) {
						day = this.year + '-0' + this.month + '-0' + this.day
					} else {
						day = this.year + '-0' + this.month + '-' + this.day
					}
				} else {
					if (this.day < 10) {
						day = this.year + '-' + this.month + '-0' + this.day
					} else {
						day = this.year + '-' + this.month + '-' + this.day
					}
				}
				const res = await this.$u.api.selectAppraisal({
					day: day
				})
				if (!res.success) {
					return;
				}
				this.tableData = res.body.data
				console.log(this.tableData);
			},
			toLink(url) {
				console.log(url);
				uni.downloadFile({
				  url: url,
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      success: function (res) {
				        this.$u.toast("正在打开...")
				      }
				    });
				  }
				});
			}

		},

	}
</script>

<style>
	page {
		background-color: #2169D3;
	}

	/* 顶部导航栏 */
	/* 手机系统 系统状态栏高度 */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #2169D3;
	}

	/* content */
	.content {
		display: flex;
		/* padding-top: 20rpx; */
		padding: 30rpx 40rpx 30rpx 30rpx;
	}

	/* 日期选择 */
	.content1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 38rpx;
	}

	.center-right {
		display: flex;
		margin: 10rpx 20rpx;
	}

	.center-right-inputSelect {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #58B6E5;
		width: 180rpx;
		height: 30rpx;
		border: 2rpx solid #000000;
		font-size: 16rpx;
		color: #FFFFFF;
		margin-right: 5rpx;
	}

	.center-right-inputSelect input {
		width: 120rpx;
		border-bottom: 3rpx solid #FFFFFF;
		margin-top: 0rpx;
		font-size: 13rpx;
		color: #034AB2;
	}

	.center-right-inputSelect-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 8rpx;
		width: 20rpx;
		height: 16rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #000000;
	}

	.picker-view {
		position: absolute;
		z-index: 999;
		width: 140rpx;
		height: 120rpx;
		margin-left: 24rpx;
		font-size: 14rpx;
		background-color: #ACC4E6;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.center-right-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 85rpx;
		height: 30rpx;
		color: #FFFFFF;
		font-size: 16rpx;
		background-color: #58B6E5;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
	}

	.content2 {
		width: 400rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		padding-right: 20rpx;
		font-size: 17rpx;
		font-weight: 700;
		padding: 20rpx;
		overflow-y: auto;
	}

	.content-item {
		margin-bottom: 40rpx;
	}

	.content-text {
		font-weight: 400;
	}

	.content-text-resonse {
		text-indent: 1em;
		line-height: 30rpx;
	}

	.content-item view {
		margin-bottom: 10rpx;
	}

	.reportLink {
		color: #2169D3;
	}
</style>
